<script type="text/javascript">
	$(document).ready(function () {
		$('#mainSplitter').jqxSplitter({  width: '100%', height: 590, panels: [{ size: 200, min: 100 }, {min: 200, size: 400}] });
		$("#feedExpander").jqxExpander({toggleMode: 'none', showArrow: false, width: "100%", height: "100%", 
            initContent: function () {
                $('#menuTree').jqxTree({ height: '100%', width: '100%'});

                $('#menuTree').jqxTree('disableItem', 0);
                
                $('#menuTree').on('select', function (event) {
                    var args = event.args;
                    var item = $('#menuTree').jqxTree('getItem', args.element);

                    var tab_length = $('#pageTabs').jqxTabs('length');
					var found_tab = false;
					
                    for(i=0;i<tab_length;i++){
						var title = $('#pageTabs').jqxTabs('getTitleAt', i);
						if(title == item.label){
							found_tab = true;
						}
                    } 

                    if(!found_tab){
                    	$('#pageTabs').jqxTabs('addLast', item.label,'<iframe src="<?php echo base_url(); ?>index.php/'+item.label+'" width="99%" height="555" scrolling="yes" ></iframe>');
                    	$('#pageTabs').jqxTabs('ensureVisible', -1);
                    }else{
                    	$('#pageTabs').jqxTabs('select',item);
                    }
                });
            }
        });

		$('#pageTabs').jqxTabs({ width: '100%', height: 600, position: 'top',selectionTracker: true,showCloseButtons: true});
		
		$('#pageTabs').on('selected', function (event) {
			var menu = '#'+$('#pageTabs').jqxTabs('getTitleAt', event.args.item).replace(/ /g,'');
			$("#menuTree").jqxTree('selectItem', $(menu)[0]);
        });

		
	});
</script>
<div >
	<span style="float: left;font-weight: bold;">Soft Stat</span>
	<span style="float: right;;font-weight: bold">Welcome, <?php echo $loginname;?>|
	<a  href="<?php echo base_url()."/index.php/home/dologout"?>">Log out</a>
	</span>
</div>
<div id="mainSplitter">
	<div style="border: none;" id="feedExpander">
		<div class="jqx-hideborder">Menu</div>
		<div class="jqx-hideborder jqx-hidescrollbars">
			<div class="jqx-hideborder" id='menuTree'>
				<ul>
					<li item-expanded='true' id="Admin"><span item-title="true">Administrator</span>
						<ul>
							<li id="User"><span item-title="true">User</span></li>
							
						</ul>
					</li>
					<li item-expanded='true' id="t2"><span item-title="true">Master</span>
						<ul>
							<li id="Team"><span item-title="true">Team</span></li>
							<li id="Player"><span item-title="true">Player</span></li>
							<li id="Tournament"><span item-title="true">Tournament</span></li>

							<li id="Game"><span item-title="true">Game</span></li>
						</ul>
					</li>
					<li item-expanded='true' id="t2"><span item-title="true">Statistics</span>
						<ul>
							<li id="GameStat"><span item-title="true">Game Stats</span></li>
							<li id="PlayerStat"><span item-title="true">Player Stats</span></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div>
		<div class="jqx-hideborder">
			<div id='pageTabs'>
            	<ul>
                	<li style="margin-left: 30px;" hasclosebutton='false'>Home</li>                	
            	</ul>
            	<div></div>            	
            	</div>
		</div>
	</div>
</div>